/* 头部样式开始 */
#layout-header {
  position: fixed;
  width: 100%;
  z-index: 999;
  height: 60px !important;
  background-color: rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

#layout-header:hover {
  transition: 0.5s;
  background-color: rgba(0, 0, 0, 0.5);
}

#layout-header i {
  font-size: 20px;
  padding: 0 1px;
}

/* 网站名称样式 */
.layout-header-left {
  position: relative;
  top: 5px;
  height: 50px;
  width: 90px;
  border-radius: 1.5rem;
  line-height: 50px;
  text-align: center;
  font-size: 20px;
  font-weight: bolder;
  cursor: pointer;
}

/* 导航样式 */
#el-menu-item {
  font-size: 15px;
  margin-left: 20px;
  font-weight: bolder;
}

#el-menu-item:hover {
  color: chartreuse;
  background-color: rgba(0, 0, 0, 0) !important;
}

/* 导航下划线 */
.el-menu-item-line {
  height: 3px;
  width: 0px;
}

#el-menu-item:hover .el-menu-item-line {
  transition: 1s;
  background-color: chartreuse;
  width: 100%;
}

/* 头像 */
#user-img {
  width: 40px;
  border-radius: 50%;
  margin-top: -5px;
}

/* 头像旋转 */
#user-img:hover {
  animation: rotateAnimation 0.5s linear;
  /* 应用旋转动画 */
}

@keyframes rotateAnimation {
  from {
    transform: rotate(0deg);
    /* 从0度开始旋转 */
  }

  to {
    transform: rotate(360deg);
    /* 旋转一圈，360度 */
  }
}

/* 头部样式结束 */

/* 内容样式 */
#el-main {
  overflow: hidden;
}

/* 底部样式 */
#footer {
  position: relative;
  height: 40px;
  line-height: 40px;
  width: 150vw;
  left: -25vw;
  color: #474747;
  box-shadow: 0 2px 4px rgba(0, 0, 0);
  /* 线性渐变 */
  /* background-image: linear-gradient(45deg,
      #b3e5fc,
      #4fc3f7,
      #29b6f6,
      #039be5,
      #0288d1);
  background-size: 300% 300%;
  animation: gradientAnimation ease 3s infinite; */
}

@keyframes gradientAnimation {
  0% {
    background-position: 0 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0 50%;
  }
}

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 8px;
  /* 滚动条宽度 */
  background-color: #f1f1f1;
  /* 滚动条背景颜色 */
}

::-webkit-scrollbar-thumb {
  background-color: #888888;
  /* 滚动条滑块颜色 */
  border-radius: 5px;
  /* 滚动条滑块圆角 */
}

::-webkit-scrollbar-thumb:hover {
  background-color: #09eec8;
  /* 滚动条滑块hover状态下的颜色 */
}

/* 手机导航栏 */
.phone-nav {
  position: absolute;
  top: 0px;
  height: 100vh;
  width: 100vw;
  background-image: url("https://llpy-blog.oss-cn-shenzhen.aliyuncs.com/background/%E8%83%8C%E6%99%AF8.webp");
  background-position: center center;
}

.phone-nav #el-menu-item {
  margin-left: 0px;
}


/* 图片放大 */
.oversize-img:hover {
  transition: 1s;
  transform: scale(1.2);
}